<!--  -->
<template>
  <div class="">
    <a-card :bordered="false" class="search-wrapper">
      <div class="search-form-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item>
                <capital-select v-model="filter.capitalCode" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <project-select v-model="filter.projectCode" placeholder="投资项目" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <brand-select v-model="filter.brandCode" placeholder="标的公司" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <store-select v-model="filter.storeCode" placeholder="投资店铺" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-select v-model="filter.performanceStatus" placeholder="项目状态" allow-clear>
                  <a-select-option value="1">履约中</a-select-option>
                  <a-select-option value="2">已到期</a-select-option>
                  <a-select-option value="0">未开始</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <brand-select v-model="filter.brandCode" placeholder="投资品牌" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <store-select v-model="filter.storeCode" placeholder="投资店铺" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handle">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (filter = {})">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card class="table-wrapper">
      <a-table
        :loading="tableLoading"
        bordered
        :columns="columns"
        :pagination="pagination"
        :data-source="tableData || []"
        @change="(e) => handle(e)"
        :scroll="{ y: tableHeight, x: 'max-content' }"
      >
        <template slot="receivableAccount" slot-scope="text, record">
          <div class="text">{{ text }}</div>
          <div class="code">（{{ record.receivableAccount }}）</div>
        </template>
        <template slot="projectCode" slot-scope="text, record">
          <div class="text">{{ text }}</div>
          （{{ record.projectCode }}）
        </template>
        <template slot="brandCode" slot-scope="text, record">
          <div class="text">{{ text }}</div>
          （{{ record.brandCode }}）
        </template>
        <template slot="performanceEndTime" slot-scope="text, record">
          {{ text }}~{{ record.performanceEndTime }}
        </template>
        <template slot="storeCode" slot-scope="text, record">
          <div class="text">{{ text }}</div>
          （{{ record.storeCode }}）
        </template>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="toDetail(record)">查看明细</a-button>
        </span>
      </a-table>
    </a-card>
    <invest-detail ref="invest-detail" @on-submit="handle" />
  </div>
</template>

<script>
import { capitalInvestList } from '@/api/capital'
import { DateTimeRange } from '@/components'
import { digitSymbolFormat } from '@/utils/index'
import InvestDetail from './module/invest-detail.vue'
import CapitalSelect from '@/myComponents/capital-select.vue'
import BrandSelect from '@/myComponents/brand-select.vue'
import ProjectSelect from '@/myComponents/project-select.vue'
import StoreSelect from '@/myComponents/store-select'

// import moment from 'moment'
// const beginTime = moment().subtract(3, 'days').format('YYYY-MM-DD 00:00:00')
// const endTime = moment().format('YYYY-MM-DD 23:59:59')
export default {
  data() {
    return {
      tableLoading: false,
      filter: {
        pageSize: 10,
        pageNum: 1,
        beginTime: '',
        endTime: '',
        _dateRange: [],
        name: '',
        contact: '',
        contactPhone: '',
        provinceCode: '',
        cityCode: '',
        districtCode: ''
      },
      tableData: [],
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      columns: [
        {
          title: '资方',
          dataIndex: 'receivableName',
          scopedSlots: { customRender: 'receivableAccount' }
        },
        {
          title: '投资项目',
          dataIndex: 'projectName',
          scopedSlots: { customRender: 'projectCode' }
        },
        {
          title: '出资金额(元)',
          dataIndex: 'investAmount',
          customRender: (text) => digitSymbolFormat(text)
        },
        { title: '项目状态', dataIndex: 'performanceStatusDesc' },
        {
          title: '履约时间',
          dataIndex: 'performanceStartTime',
          scopedSlots: { customRender: 'performanceEndTime' }
        },
        { title: '投资品牌', dataIndex: 'brandName', scopedSlots: { customRender: 'brandCode' } },
        { title: '投资店铺', dataIndex: 'storeName', scopedSlots: { customRender: 'storeCode' } },
        {
          title: '店铺累计营收(元)',
          dataIndex: 'incomeAmount',
          customRender: (text) => digitSymbolFormat(text)
        },
        {
          title: '分账到账金额(元)',
          dataIndex: 'divideSuccessAmount',
          customRender: (text) => digitSymbolFormat(text)
        },
        {
          title: '分账在途金额(元)',
          dataIndex: 'divideRouteAmount',
          customRender: (text) => digitSymbolFormat(text)
        },
        {
          title: '投资回报率(%)',
          dataIndex: 'investmentRate',
          customRender: (text) => (text ? text + '%' : text)
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  computed: {
    tableHeight() {
      return document.body.clientHeight - this.tabbarHeight
    }
  },
  components: {
    DateTimeRange,
    InvestDetail,
    CapitalSelect,
    BrandSelect,
    ProjectSelect,
    StoreSelect
  },
  activated() {
    this.handle()
  },
  mounted() {
    this.handle()
  },
  methods: {
    toDetail(record) {
      this.$refs['invest-detail'].open(record)
    },
    handle(v) {
      if (v && v.current) {
        if (this.filter.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.filter.pageNum = v.current
        } else {
          this.filter.pageSize = v.pageSize
          this.filter.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.filter.pageNum = 1
        this.filter.pageSize = 10
        this.pagination.current = 1
      }
      this.tableLoading = true
      capitalInvestList(this.filter)
        .then((res) => {
          this.tableLoading = false
          this.tableData = res.rows
          this.pagination.total = res.total || 0
        })
        .catch(() => {
          this.tableLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.box-act {
  display: flex;
}
.search-box {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 47px;
  margin-bottom: 19px;
  .type-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .type-item {
      height: 45px;
      line-height: 45px;
      border-bottom: 2px solid #fff;
      padding: 0 20px;
      font-size: 14px;
      cursor: pointer;
    }
    .type-item.active {
      border-bottom: 2px solid #4393f2;
      font-size: 16px;
      font-weight: 500;
      color: #4393f2;
    }
  }
}
.box-total-item {
  font-size: 12px;
}
</style>
